<template>
	<view class="my-team">
		<view class="top-bar">
			<view class="statusbar"></view>
			<view class="navbar" @tap="back">
				<!---->
				<image class="white-arrow-left"
					src="">
				</image>
				<!---->
				<view class="nav-title" style="color: rgb(255, 255, 255);">我的团队</view>
				<!---->
				<!---->
			</view>
		</view>
		<view class="virtural-box"></view>
		<view class="team-bg" mode="widthFix"></view>

		<view class="team-number">
			<view class="big-number">{{sums}}</view>
			<view class="team-tetxt">我的团队</view>
		</view>
		<view class="card-bg"></view>
		<view class="page-content">
			<view>
				<view class="u-sticky-wrap u6nRhpsVbqEklZj9WhRCTdSN7rBt8fgX"
					style="height: auto; background-color: transparent;">
					<view class="u-sticky">
						<view class="card-list">
							<view data-id="0" class="card-one co-active">
								<view class="co-text">直推创客</view>
								<view class="co-number">{{teamSum['ckCount']}}人</view>
							</view>
							<view data-id="0" class="card-one co-active">
								<view class="co-text">直推老板</view>
								<view class="co-number">{{teamSum['bossCount']}}人</view>
							</view>
							<view data-id="0" class="card-one co-active">
								<view class="co-text">直推合伙人</view>
								<view class="co-number">{{teamSum['hhrCount']}}人</view>
							</view>
						</view>
				
							<view class="yui-team-blocks">
								<view class="item-list-block" v-for="(item, index) in teamList" :key="index">
									<view class="item-info">
										<view class="item-faces">
											<image :src="item.user_headimg" class="team-avatar"></image>
										</view>
										<view class="item-name">
											<view class="item-name-nick">
												{{item.nick_name}}
											</view>
											<view class="item-name-mobile">{{item.user_tel}}</view>
										</view>
										<view class="item-time">
										  <view>{{item.reg_time}}</view>
										 
										  <view class="yui-item-tip" :class="item.member_level==47?'yui-item-grey':'yui-item-yellow'">
										  		{{item.level_name}}

										  </view>
										</view>
									
						
									</view>
								</view>
							</view>
					
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				error: true,
				msg: null,
				teamList: '',
				userinfo: '',
				loadding: false,
				teamSum: '',
				sums:0,
			}
		},
		onShow() {
			this.tui.haslogin();
			if (this.tui.isLogin()) {
				this.init();
			}
			this.userinfo = this.tui.getUserInfoData();
		},
		onPullDownRefresh() {
			this.init();
		},
		methods: {
			init() {
				this.loadding = true;
				let token = this.tui.getToken();
				let datas = {
					token: token,
				};
				let result = this.tui.request('user', 'post', datas, 1000, 1, '', 'getMyTeam');
				Promise.resolve(result).then((value) => {
					if (value.code == 200) {
						this.teamList = value.data.child;
						 this.teamSum = value.data.my_info;
						this.sums = value.data.my_info.count;
			
						//写入缓存
					} else {
						this.tui.toast(value.message);
					}
					this.loadding = false;
				})
			},
			back: function() {
				if (this.drawer) {
					this.closeDrawer();
				} else {
					uni.navigateBack();
				}
			},

		}
	}
</script>

<style>
	.statusbar{
	    width: 100%;
	    height: 44px;
	}
	.navbar{
	    height: 44px;
	    width: 100%;
	    display: flex;
	    align-items: center;
	    position: relative;
	}
    .virtural-box {
        width: 100%;
        height: 88px;
    }
	.nav-title{
	    color: #000;
	    position: absolute;
	    font-size: 17px;
	    font-weight: 600;
	    top: 13px;
	    left: 50%;
	    line-height: 17px;
	    margin-left: -34px;
	}
	.yui-item-red{
		background:#f00;
	}
	.my-team{
		position: relative;
		background:url("../../static/images/my/team-bg.png") no-repeat;
		background-size: 100%;
	}
	.yui-item-grey{
		background: #c1c1c1;;
	}
	.yui-item-yellow{
		background:#ffc226;
	}
	.yui-item-tip{
		/* background:#f00; */
		border-radius: 8rpx;
		text-align: center;
		margin-top: 14rpx;
		width:60rpx;
		color:#fff;
		padding:4rpx 20rpx;
		display: block;
		
	}
	.item-time {
		font-size: 20rpx;
		color: #d3d3d3;
		text-align: right;
		position: absolute;right:0rpx;top:40rpx;
		
		box-sizing: border-box;
	}
	.yui-item-tip{
		
		text-align: center;
		margin-top: 10rpx;
		padding:6rpx 10rpx;
		color:#fff;
		width:60rpx;
		border-radius: 10rpx;;
	}
	.team-tetxt {
		font-size: 14px;
		color: hsla(0, 0%, 100%, .8)
	}
	.item_level{
		position: absolute;
		right:0rpx;
		top:80rpx;
		font-size: 24rpx;
		background:#ff3661;
		color:#fff;
		border-radius: 10rpx;
		padding:10rpx
	}
	.item-name-mobile{
		font-size: 26rpx;
		margin-top: 20rpx;
		text-align: left;
	}
    .yui-team-list{
    	margin-top: 30rpx;
    	text-align: center;
    }
	.item-info {
		position: relative;
		display: flex;
		box-sizing: border-box;
		align-items: center;
		padding: 20rpx 0;
	}
	.big-number {
		font-family: BebasNeueBold;
		font-size: 44px
	}
	.item-name-nick {
		font-size: 28rpx;
		display: flex;
		box-sizing: border-box;
		align-items: center;
		color:#8b8b8b;
	}
    .yui-color-red{
		background:#f00;
	}
	.yui-color-grey{
		background:#d0d0cb;
	}
	.yui-color-yellow{
		background:#ffa60b;
	}
	.item-faces {
		margin-right: 20rpx;
	}
	.item-faces {
		margin-right: 20rpx;
	}
	.white-arrow-left {
		width: 8px;
		height: 16px;
		margin-left: 17px;
	}
    .team-avatar {
    	width: 100rpx;
    	height: 100rpx;
    	border-radius: 50rpx;
    
    }
    
    .team-nickname {
    	margin-left: 20rpx;
    	line-height: 50rpx;
    }
    
    .team-list {
    	margin-top: -60rpx;
    	padding: 0 30rpx;
    	height: 100rpx;
    }
    
    .item-list-block {
		border:2rpx solid #ff3661;
    	color:#828282;
    	margin:30rpx;
    	padding: 0rpx 30rpx;
    	border-radius: 20rpx;
    }
    
	.big-number {
		font-family: BebasNeueBold;
		font-size: 44px;
	}
    
    .yui-team-blocks{
    	width:100%;
    	margin:30rpx auto;
    	padding:10rpx 0;
    }
	.team-number {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		color: #fff;
		width: 100%;
		height: 120px
	}

	.page-content {
		position: relative;
		top: -123px
	}
.top-bar{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
}
	.team-bg {
		width: 100%;
		height: 280px;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1
	}

	.card-bg {
		width: 100%;
		height: 127px;
		border-top-right-radius: 8px;
		border-top-left-radius: 8px;
		background: linear-gradient(180deg, #fff, #fff 54%, hsla(0, 0%, 84.7%, 0) 100%, hsla(0, 0%, 84.7%, 0) 0)
	}

	.card-list {
		background: #fff;
		display: flex;
		justify-content: space-between;
		padding: 10px 25px
	}

	.card-one {
		width: 90px;
		height: 52px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: 8px;
		background: #f6f6f6
	}

	.co-text {
		font-size: 16px;
		color: #222;
		font-weight: 600;
		margin-bottom: 5px
	}

	.co-number {
		font-size: 12px;
		color: rgba(34, 34, 34, .6)
	}

	.cb-item {
		width: 83px
	}

	.card-bottom {
		display: flex;
		flex-wrap: wrap;
		padding-left: 10px;
		padding-bottom: 10px
	}

	.cb-flex {
		display: flex;
		padding: 10px;
		border-bottom: 1px solid #ebebf0
	}

	.co-active {
		background: linear-gradient(96deg, #ff2c29 1%, #ff2c29 0, #ff3769 97%, #ff3769 0)
	}

	.co-active .co-text {
		color: #fff
	}

	.co-active .co-number {
		color: hsla(0, 0%, 100%, .6)
	}

	.cb-line {
		width: 1px;
		height: 30px;
		position: relative;
		top: 10px;
		background: #ebebf0;
		margin: 0 17px
	}

	.cb-number {
		font-family: BebasNeueBold;
		font-size: 22px;
		font-weight: 700;
		margin-bottom: 5px
	}

	.cb-text {
		font-size: 12px;
		color: #888
	}

	.card {
		width: 355px;
		background: #fff;
		border-radius: 8px;
		box-sizing: border-box;
		margin: 0 auto;
		margin-top: 4px
	}

	.card-flex {
		display: flex;
		padding-bottom: 10px;
		border-bottom: 1px solid #dcdcdc;
		padding-top: 13px;
		padding-left: 13px
	}

	.team-image {
		width: 36px;
		height: 36px;
		border-radius: 36px;
		margin-right: 10px
	}

	.tphone {
		font-size: 12px;
		color: rgba(34, 34, 34, .4)
	}

	.tname {
		font-size: 14px;
		color: #222
	}

	.top-banner {
		margin: 0 auto;
		margin-top: 10px;
		align-items: center;
		width: 355px;
		padding: 6px 15px;
		height: 44px;
		border-radius: 8px;
		background: linear-gradient(180deg, #ffe4c9, #ffe4c9 0, #fff 100%, #fff 0);
		box-sizing: border-box;
		display: flex;
		justify-content: space-between
	}

	.tb-button {
		font-size: 15px;
		text-align: center;
		line-height: 32px;
		color: #491800;
		width: 88px;
		height: 32px;
		border-radius: 319px;
		background: linear-gradient(90deg, #f4ddc2, #f4ddc2 0, #e5b397 100%, #e5b397 0)
	}

	.noborder {
		border: none
	}

	.tb-text {
		font-size: 15px;
		color: #9f6020;
		font-weight: 600
	}

	.tb-flex {
		display: flex
	}

	.tb-image {
		width: 16px;
		height: 20px;
		margin-right: 10px
	}
</style>
